<template>
  <nav class="nav-bar">
      <div class="logo">
        <img
          src=""
          alt="Logo" width="24" height="24">
        <span>教师后台服务</span>
      </div>

      <ul class="nav-links">
        <li v-for="(link, index) in navLinks" :key="index">
          <router-link :to="getRouteByLink(link)" :class="{ active: activeNavIndex === index }"
            @click="activeNavIndex = index">
            {{ link }}
          </router-link>
        </li>
      </ul>

      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索您需要的内容" v-model="searchKeyword">
        <button class="search-button">🔍</button>
      </div>

      <div class="user-area">
        <div class="user-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M20 21V19C20 17.8954 19.1046 17 18 17H6C4.89543 17 4 17.8954 4 19V21" stroke="white"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path
              d="M12 7C14.2091 7 16 5.20914 16 3C16 0.790861 14.2091 -1 12 -1C9.79086 -1 8 0.790861 8 3C8 5.20914 9.79086 7 12 7Z"
              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div v-if="isUserLoggedIn">
          <a href="#" @click="goToProfile">个人中心</a>
          <a href="#" @click="logout">注销</a>
        </div>
        <div v-else>
          <a href="#" @click="goToLogin">登录</a>
          <a href="#" @click="goToRegister">注册</a>
        </div>
      </div>
    </nav>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();


// 导航栏激活项索引
const activeNavIndex = ref(0);

// 搜索功能的搜索关键词
const searchKeyword = ref('');

// 导航链接
const navLinks = ref([
  '班级学情分析',
  '班级信息',
  '发布考试',
  '教学方案优化',
  '家校联动'
]);

// 根据导航链接名称返回对应的路由路径
const getRouteByLink = (link: string) => {
  switch (link) {
    case '班级学情分析':
      return '/teacher/Academyanalyse';
    case '班级信息':
      return '/teacher/ClassInfo';
    case '发布考试':
      return '/teacher/examPublish';
    case '教学方案优化':
      return '/teacher/advice';
    case '家校联动':
      return '/teacher/connect';
    default:
      return '/';
  }
};


// 是否用户已登录
const isUserLoggedIn = ref(false);

// 检查用户登录状态
const checkLoginStatus = () => {
  const token = localStorage.getItem('SessionID');
  isUserLoggedIn.value = !!token;
};

// 登录
const goToLogin = (e: Event) => {
  e.preventDefault();
  router.push('/login');
};

// 注册
const goToRegister = (e: Event) => {
  e.preventDefault();
  router.push('/register');
};

// 个人中心
const goToProfile = (e: Event) => {
  e.preventDefault();
  router.push('/profile');
};

// 注销
const logout = (e: Event) => {
  e.preventDefault();
  localStorage.removeItem('SessionID');
  isUserLoggedIn.value = false;
  ElMessage.success('已注销');
};

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus();
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
}

/* 导航栏样式 */
.nav-bar {
  background-color: #1a2640;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.logo img {
  margin-right: 10px;
}

.logo span {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.search-bar {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 250px;
  height: 36px;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 0 15px;
  font-size: 14px;
}

.search-button {
  width: 40px;
  height: 36px;
  background-color: #1976d2;
  border: none;
  border-radius: 0 4px 4px 0;
  color: white;
  cursor: pointer;
}

.user-area {
  display: flex;
  align-items: center;
}

.user-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-links a {
  color: #fff;
  text-decoration: none;
  margin-left: 10px;
  font-size: 14px;
}

/* 横幅区域 */
.banner {
  background-color: #1e88e5;
  color: white;
  padding: 40px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('');
  opacity: 0.1;
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 1;
  width: 60%;
}

.banner-title {
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 15px;
}

.banner-heading {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}

.banner-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
}

.banner-button {
  background-color: #ffc107;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.banner-image {
  position: relative;
  z-index: 1;
  width: 40%;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 内容区域 */
.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.news-section,
.notice-section {
  width: 48%;
}

.section-header {
  display: flex;
  margin-bottom: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e88e5;
  margin-right: 20px;
}

.section-subtitle {
  font-size: 20px;
  color: #777;
}

.news-list,
.notice-list {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.news-item,
.notice-item {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child,
.notice-item:last-child {
  border-bottom: none;
}

.news-number {
  font-size: 18px;
  color: #999;
  width: 30px;
  text-align: center;
}

.news-date {
  font-size: 14px;
  color: #999;
}

.news-title {
  font-size: 14px;
  flex-grow: 1;
  margin-left: 10px;
}

/* 页脚 */
.footer {
  background-color: #1a2640;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  position: relative;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-item {
  margin: 0 20px;
}

.footer-copyright {
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}
</style>

